
function Transition(xAux, yAux, x2Aux, y2Aux, wAux, hAux) {
	// ************************************************************************ 
	// PRIVATE VARIABLES AND FUNCTIONS 
	// *********************************************************************** 
     var x;
     var y;
     var x2;
     var y2;
     var w;
     var h;

     //Create the 
     var init = function(xAux, yAux, x2Aux, y2Aux, wAux, hAux){
    	 x = xAux;
    	 y = yAux;
    	 x2 = x2Aux;
    	 y2 = y2Aux;
    	 w = wAux;
    	 h = hAux;
     };
     init(xAux, yAux, x2Aux, y2Aux, wAux, hAux);

     // ************************************************************************ 
     // PUBLIC VARIABLES AND FUNCTIONS 
     // *********************************************************************** 
     this.showValues = function() {
         alert(x + " - " + y + " - " + x2 + " - " + y2 + " - " + w + " - " + h);
     };
	 
	 this.printValues = function() {
         console.log(x + " - " + y + " - " + x2 + " - " + y2 + " - " + w + " - " + h);
     };
     
     this.getId = function() {
         return 'trans' + x + y + x2 + y2 + w + h;
     };
     this.getValue = function(value) {
    	 switch(value) {
	    	 case 'x':	return x;
	    	 case 'y':	return y;
	    	 case 'x2':	return x2;
	    	 case 'y2':	return y2;
	    	 case 'w':	return w;
	    	 case 'h':	return h;
    	 }
     };

     this.setValues = function(xAux, yAux, x2Aux, y2Aux, wAux, hAux) {
    	 x = xAux;
         y = yAux;
         x2 = x2Aux;
         y2 = y2Aux;
         w = wAux;
         h = hAux;
     };
	 
	 this.asObject = function(){
		return {'x':x, 'y':y, 'x2':x2, 'y2':y2, 'w':w, 'h':h};
	 };
     
}

function Preview(divId, imgId){
	// ************************************************************************ 
	// PRIVATE VARIABLES AND FUNCTIONS 
	// *********************************************************************** 
	var transitions = new Array();
	var imageId;
	var jCropApi;
	
	/**
	 * Create the transition list
	 */ 
    var init = function(divId, imgId){
    	$('#' + divId).append('<ul id="transitions"></ul>');
    	imageId = imgId;
    };
    init(divId, imgId);
    
    // ************************************************************************ 
	// PUBLIC VARIABLES AND FUNCTIONS 
	// ***********************************************************************
    
    /**
     * Creates a preview with the image
     */
    this.createPreviewImage = function(trans, transId){
    	var DIV_SIZE = 100;
    	
    	var $liDiv = $('#' + transId + ' div');
    	var $liImg = $('#' + transId + ' img');
    	var image = $('#' + imageId).attr('src');

    	//Get the dimensions of the selection
    	var width = trans.getValue("x2") - trans.getValue("x"); 
    	var height = trans.getValue("y2") - trans.getValue("y");
    	
    	//Determine the position of the inner image
    	var sideSize = width;
    	if(width < height){
    		sideSize = height;
    	}
		var top = trans.getValue("y") / (sideSize / DIV_SIZE);
		var left = trans.getValue("x") / (sideSize / DIV_SIZE);
		
		//Reset the LI original size
		$liDiv.css("height", "");
		$liDiv.css("width", "");
		
		var size;
		var sizeW;
		var sizeH;
		if(width < height){
			size = DIV_SIZE / (height / width);
			$liDiv.css("width", size);
			
			sizeW = "";
			sizeH = parseInt($('#strip').height()) / (height / DIV_SIZE);
    	}else{
    		size = DIV_SIZE / (width / height);
    		$liDiv.css("height", size);
			
			sizeW = parseInt($('#strip').width()) / (width / DIV_SIZE);
			sizeH = "";
    	}
		
    	//Add the image
    	$liImg.attr('src', image);
    	$liImg.css('top', '-' + top + 'px');
    	$liImg.css('left', '-' + left + 'px');
    	$liImg.css("height", sizeH);
    	$liImg.css("width",  sizeW);
    	
    	//Adjust the li top position
    	$liDiv.css('top', ((100 - parseInt($liDiv.height()))/2) + 'px');
    	$liDiv.css('left', ((100 - parseInt($liDiv.width()))/2) + 'px');
    };
    
	/**
	 * Adds a transition to the last position of the list.
	 */
	this.addTransition = function(trans) {
		//Add the transition to the array
    	var size = transitions.length;
    	transitions[size] = trans;
    	//Add the transition to the list
    	$('#transitions').append('<li id="'+ trans.getId() +"_"+ size +  '"><div><img class="preview" /></div></li>');
    	//Add the image preview to the li
    	this.createPreviewImage(trans, trans.getId() +"_"+ size);
    	//Add behavior to the li
    	$('#' + trans.getId() +"_"+ size).click(function(){
    		//Select the current transition
    		$('#timeline ul li.selected').removeClass("selected");
    		$(this).addClass("selected");
    		//Show the selected area
    		jCropApi.animateTo([trans.getValue("x"),trans.getValue("y"),trans.getValue("x2"),trans.getValue("y2")]);
    	});
     };
     
    this.setJCrop = function(jCropApiAux){
    	 jCropApi = jCropApiAux;
     };
     
    this.getSelectedTransition = function(){
    	 var id = $('#timeline ul li.selected').attr('id');
    	 if(id != undefined){
    		 var x = id.lastIndexOf("_");
    		 return transitions[id.substring(x+1, id.length)];
    	 }
    	return null;
     };
     
    this.clearSelected = function(){
    	 $('#timeline ul li.selected').removeClass("selected");
     };
	 
	 this.clearTransitions = function(){
		$('#transitions').html("");
		transitions = [];
	 };
	 
	 /**
	 * Returns the transtions as an array to be parsed by JSON.stringify
	 */
	this.toJSON = function(){
		var aux = [];
		transitions.forEach(function(item) {aux.push(item.asObject())});
		return aux;
	}
	
}



/*
this.createPreviewImage = function(trans, transId){
	var $liImg = $('#' + transId + ' img');
	var image = $('#' + imageId).attr('src');

	//Get the dimensions of the selection
	var width = trans.getValue("x2") - trans.getValue("x"); 
	var height = trans.getValue("y2") - trans.getValue("y");
	//Determine the smallest one
	var smallest = "height";
	var sideSize = height;
	if(width < height){
		smallest = "width";
		sideSize = width;
	}
	//Determine relation to the li element (80x80)
	var size = 0;
	var proportion = sideSize / 80;
	
	if(width < height){
		size = parseInt($('#strip').width()) / proportion;
	}else{
		size = parseInt($('#strip').height()) / proportion;
	}
		
	var top = trans.getValue("y") / proportion;
	var left = trans.getValue("x") / proportion;
	
	//Add the image
	$liImg.attr('src', image);
	$liImg.css('top', '-' + top + 'px');
	$liImg.css('left', '-' + left + 'px');
	$liImg.css("height", "auto");
	$liImg.css("width", "auto");
	$liImg.css(smallest, size);
};*/



